<template>
	<view class="">
		<text class="lb">塔机列表</text>
		<text class="lb">{{ Count }}</text>
		
		<navigator url="/pages/index/N1" hover-class="navigator-hover"><!-- 跳转 -->
		
		<view class="card-area">
			<view class="card-3">
				<view class="">
				<text class="tj">设备号:{{ ID }}</text>
				    <view class="">
					  <image class="data-logo" src="/static/塔机.png"></image>
				    </view>
				</view>
				
				<view class="">
					<view class="dot" v-if="fnOnlineStatusText(heartbeatTime).status==1"></view>
					<view class="dot-red" v-if="fnOnlineStatusText(heartbeatTime).status==0"></view>
				</view>
				<view class="">
					<text class="zx">{{fnOnlineStatusText(heartbeatTime).text}}</text><!-- 状态指示灯 -->
				</view>
			</view>
		</view>
		</navigator>
		
		<button @click="sendMessage(Text)">WebSocket测试</button>
		<button @click="sendMessage(Text2)">WebSocket测试</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Text:'{"Acount":56,"Bcount":78,"ID":124001,"heartbeatTime":500}',
				Text2:'{"Acount":56,"Bcount":78,"ID":124321,"heartbeatTime":0}',
				Count:'',
				
				heartbeatTime: 0,
				receivedData:'',
				
				Acount: 0,
				Bcount: 0,
				ID: 0,
			}
		},
		onLoad() {
			// uni.connectSocket({
			// 	  url: 'ws://124.222.224.186:8800'
			// 	  // url: 'ws://192.168.45.199:8000',
			// 	});
				
			// uni.onSocketOpen(function (res) {
			// 	  console.log('WebSocket连接已打开！');
			// 	});
			
			// uni.onSocketMessage((res) => {
			// 	  console.log('收到服务器内容：' + res.data);
			// 	  // this.receivedData = res.data
			// 	  const start = res.data.indexOf('{'); // 找到 JSON 字符串的起始位置
			// 	  const end = res.data.lastIndexOf('}') + 1; // 找到 JSON 字符串的结束位置
			// 	  const jsonString = res.data.substring(start, end); // 提取 JSON 字符串
			// 	  this.receivedData = JSON.parse(jsonString)
			// 	  // this.Count = this.receivedData;
			// 	  this.Acount = this.receivedData.Acount;
			// 	  this.Bcount = this.receivedData.Bcount;
			// 	  this.ID = this.receivedData.ID;
			// 	  this.heartbeatTime = this.receivedData.heartbeatTime;
			// 	  });
		},
		
		
		onPullDownRefresh() {
			this.initData();
		},
		
		methods: {
			initData(){
				setTimeout(() => {
					uni.reLaunch({
					        url: '/pages/index/index'
					      });
					uni.stopPullDownRefresh();
				}, 750);
			},
			
			sendMessage: function(te){
				uni.sendSocketMessage({
				  data: te
				});
			},
			fnOnlineStatusText: function(heartbeatTime) {
			    // 检查心跳时间以确定用户状态
			    let status, text;
			    
			    // 假设如果心跳时间小于某个阈值，我们认为用户是在线的
			    const HEARTBEAT_THRESHOLD = 5 * 60 * 1000; // 5分钟
			
			    if (heartbeatTime > 0 && heartbeatTime < HEARTBEAT_THRESHOLD) {
			      // 用户在线
			      status = 1;
			      text = '在线';
			    } else {
			      // 用户离线
			      status = 0;
			      text = '离线';
			    }
			
			    // 返回一个包含状态码和状态文本的对象
			    return { status: status, text: text };
			  }
			
			
		
	
		}
	}
</script>

<style>
	.card-area {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 20rpx;
		}
	.card-3 {
		height: 250rpx;
		width: 600rpx;
		border-radius: 30rpx;
		margin-top: 5rpx;
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}
	.data-logo {
		height: 175rpx;
		width: 175rpx;
		margin-top: 10rpx;
		margin-left: 35rpx;
		margin-right: auto;
		margin-bottom: auto;
	}
	.lb{
		font-size: 35rpx;
		margin-left: 80rpx;
		color: #000000;
	}
	.tj{
		font-size: 30rpx;
		margin-left: 10rpx;
	}
	.zx{
		font-size: 40rpx;
		margin-left: 18rpx;
		color: #000000;
	}
	.lx{
		font-size: 18rpx;
		margin-left: 18rpx;
		color: #000000;
	}
	.dot {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		margin-left: 150rpx;
/* 		margin-right: 10rpx; */
		background-color: #14D2B8;
	}
	.dot-red {
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
			margin-left: 150rpx;
	/* 		margin-right: 10rpx; */
			background-color: #FA3534;
		}
</style>